<template>
    <el-container>
        <el-header style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);justify-items: center;">
            <el-menu :default-active="path" class="el-menu-demo" mode="horizontal" :router="true">
                <el-menu-item index="/main/home"><i class="el-icon-location"></i>首页</el-menu-item>
                <el-menu-item index="/main/recruit"><i class="el-icon-location"></i>职位</el-menu-item>
                <el-menu-item index="/main/interact"><i class="el-icon-share"></i>互动</el-menu-item>
                <el-menu-item index="/main/mine"><i class="el-icon-user-solid"></i>我的</el-menu-item>

                <el-menu-item><el-button type="primary" plain style="text-align: end;" size="mini"
                        @click="logOut()">退出登录</el-button></el-menu-item>

            </el-menu>
        </el-header>
        <el-main style="height: 91vh;" v-loading="$store.state.vLoading" element-loading-text="拼命加载中">
            <router-view></router-view>
        </el-main>

        <el-dialog title="在线简历" :visible.sync="$store.state.resumeDialogVisible" width="70%"
            v-if="$store.state.resumeDialogVisible">
            <el-container>
                <el-aside style="width: 400px;text-align: center;padding-top: 8%;">
                    <div>简历id: {{ $store.state.resumeInfo.resumeId }}</div>
                    <div style="color: black; font-size: 30px;">{{ $store.state.resumeInfo.userDO.username }}</div>

                    <span>{{ $store.state.resumeInfo.userDO.age }}岁</span>
                    <span style="margin-left: 10px;">{{ $store.state.resumeInfo.userDO.telephone }}</span>
                    <span style="margin-left: 10px;">{{ $store.state.resumeInfo.userDO.degree }}</span>
                    <span style="margin-left: 10px;">{{ $store.state.resumeInfo.advantage }}</span>
                    <span style="margin-left: 10px;">{{ $store.state.resumeInfo.certificate }}</span>
                    <div>
                        <!-- 收藏的小星星 -->
                        <i :class="[$store.state.resumeInfo.userDO.isCollected == 1 ? 'el-icon-star-on' : 'el-icon-star-off']"
                            class="collectIcon"
                            @click="$store.dispatch('collectStatusChange', $store.state.resumeInfo.userDO)"
                            style="font-size: 20px;margin-left: 10px;"></i>
                        <!-- 拉黑button -->
                        <el-button type="text" class="blockUser"
                            @click="$store.dispatch('blockStatusChange', $store.state.resumeInfo.userDO)"
                            style="margin-left: 30px;">{{ $store.state.resumeInfo.userDO.isBlocked == 1 ? "取消拉黑" : "拉黑"
                            }}</el-button>
                    </div>



                    <div v-for="item in $store.state.resumeInfo.educationBackgroundDOList" :key="item"
                        style="margin-top: 20px;">
                        <span>{{ item.schoolName }}</span>
                        <span>{{ item.professional }}</span>
                        <br>
                        <div>{{ item.startTime }}---{{ item.endTime }}</div>
                    </div>

                    <el-button type="primary" plain size="mini" style="margin-top: 20px;"
                        @click="goTalk()">发起对话</el-button>
                </el-aside>
                <el-main>
                    <div style="color: black; font-size: 25px;">项目经历</div>
                    <div style="border: solid black 1px;"></div>
                    <div v-for="item in $store.state.resumeInfo.projectHistoryDOList" :key="item">
                        <div style="color: black; font-size: 15px;">{{ item.projectName }}</div>
                        <span>{{ item.duty }}</span>
                    </div>
                    <div style="color: black; font-size: 25px;">工作经历</div>
                    <div style="border: solid black 1px;"></div>
                    <div v-for="item in $store.state.resumeInfo.workHistoryDOList" :key="item">
                        <div style="color: black; font-size: 15px;">{{ item.workName }}</div>
                        <div>{{ item.workTime }}</div>
                        <span>{{ item.workInfo }}</span>

                    </div>


                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="$store.dispatch('resumeDialogVisible')">确 定</el-button>
                    </span>
                </el-main>
            </el-container>
        </el-dialog>
    </el-container>
</template>

<script>
import { getConcretChat, talkToNewOne, write } from '@/api/chat';
import { logOut } from '@/api/hr';

export default {
    data() {
        return {
            path: this.$route.path
        }
    },
    methods: {
        logOut() {
            logOut().then(res => {
                if (res.code == 200) {
                    this.$message.success("退出登录成功")
                    window.location.reload()
                }
            })
        },
        goTalk() {
            // 检查一下是不是新人
            getConcretChat({
                "myRole": "hr",
                "myId": this.$store.state.hrId,
                "yourRole": "user",
                "yourRoleId": this.$store.state.resumeInfo.userId
            }).then(res => {
                // 是新人
                if (res.data.length == 0) {
                    talkToNewOne({
                        myRole: "hr",
                        myId: this.$store.state.hrId,
                        yourRole: "user",
                        yourRoleId: this.$store.state.resumeInfo.userId
                    }).then(res => {
                        if (this.$route.path != `/main/interact/chatUser/${this.$store.state.resumeInfo.userId}`) {
                            this.$router.push(`/main/interact/chatUser/${this.$store.state.resumeInfo.userId}`)
                            // 这个是为了让联系人列表页面检测到是谁点进去的
                            localStorage.setItem("goTalkUser", this.$store.state.resumeInfo.userId)
                            this.$store.dispatch('resumeDialogVisible')
                        }
                    })
                } else { // 是老人
                    if (this.$route.path != `/main/interact/chatUser/${this.$store.state.resumeInfo.userId}`) {
                        this.$router.push(`/main/interact/chatUser/${this.$store.state.resumeInfo.userId}`)
                        // 这个是为了让联系人列表页面检测到是谁点进去的
                        localStorage.setItem("goTalkUser", this.$store.state.resumeInfo.userId)
                        this.$store.dispatch('resumeDialogVisible')
                    }
                }
            })

        }
    }
}
</script>

<style>
.blockUser {
    font-size: 15px;
    color: darkred;
    transition: 0.2s;
}

.blockUser:focus {
    color: darkred;
}

.blockUser:hover {
    color: grey;
}

.collectIcon {
    font-size: 40px;
    color: orange;
    transition: 0.2s;
}

.collectIcon:hover {
    color: grey;
}
</style>